<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>赠送优惠券</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .box{
            width: 800px;
        }
        .layui-btn{
            float: right;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="margin:30px 0px 0px 5px">
            <input type="text" class="layui-input-inline" style="height: 27px;" placeholder="优惠券名称" name="couponName" id="couponName"/>
            <i onclick="search()" class="layui-icon layui-icon-search" style="position: absolute;left:155px;top:38px;"></i>
        </div>
        <div style="width: 800px; height: 400px;">
            <table id="demoTable" lay-filter="demoTable"></table>
        </div>
    </div>

</body>
    <script>
        layui.use(["table","layer"],function () {
            var table = layui.table;
            var layer = layui.layer;

            getTable('');

            search=function search(){
                var couponName=$("input[name=couponName]").val();
                getTable(couponName);
            }

            function getTable(couponName){
                var param={
                    'couponName':couponName
                }
                $.ajax({
                    url:"/JsUserCoupon/getJsUserCouponList",
                    type:"post",
                    dataType:"json",
                    data:param,
                    success:function (data) {
                        demoTable(data.data);
                    }
                })
            }

            function demoTable(data) {
                table.render({
                    elem: '#demoTable',
                    title: "优惠券列表",
                    data: data,
                    limit: 10,
                    width: 1000,
                    page: {
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', 'refresh'],
                        limits: [10, 20, 30],
                        first: "首页",
                        last: "尾页",
                    },
                    cols:[[
                        {type:'checkbox'},
                        {field:"couponName",title:"优惠券名称",align:"center"},
                        {field:"couponPrice",title:"优惠金额",align:"center"},
                        {field:"type",title:"适用类型",align:"center",templet:function (data) {
                            if(data.type == 2){
                                return "商品";
                            }else if(data.type == 3) {
                                return "视频";
                            }
                        }},
                        {field:"startDate",title:"开始时间",align:"center"},
                        {field:"endDate",title:"到期时间",align:"center"},
                        {field:"",title:"剩余数量",align:"center",templet:function (data) {
                                return data.issueQuantity - data.used;
                        }}
                    ]]
                })
            }

            table.on("checkbox(demoTable)",function (obj) {
                localStorage.setItem("couponId","");
                if(obj.checked){
                    localStorage.setItem("couponId",obj.data.couponId);
                }else{
                    localStorage.setItem("couponId","");
                    layer.msg("请选择一个！！！");
                }
            });

        })
    </script>
</html>